<template>
  <div class="queryData">
    <div class="queryItem">
      <div class="spanname">用户名</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入用户名"
        />
      </div>
    </div>
    <div class="queryItem">
      <div class="spanname">账号</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入账号"
        />
      </div>
    </div>
    <div class="queryItem">
      <div class="spanname">电话</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入电话"
        />
      </div>
    </div>
    <div class="queryItem">
      <div class="spanname">邮箱</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入邮箱"
        />
      </div>
    </div>
  </div>
  <div class="operition">
    <el-button type="primary" class="reset">搜索</el-button>
    <el-button type="info" class="reset">重置</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="log_name" label="日志文件名" width="170" />
    <el-table-column prop="error_code" label="错误码" width="120" />
    <el-table-column prop="error_type" label="错误类型" width="120" />
    <el-table-column prop="error_detail" label="错误详情" width="120" />
    <el-table-column prop="origin_detail" label="原始日志详情" width="200" />
    <el-table-column prop="msg" label="预设错误信息" width="120" />
    <el-table-column prop="url" label="请求路径" width="120" />
    <el-table-column prop="request" label="请求方法" width="120" />

    <el-table-column prop="created_time" label="创建时间" width="300" />
  </el-table>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalPageSize"
      v-model:current-page="currentPage"
      :page-size="pageSize"
      @current-change="fetchData"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import pinia from "@/store";
import { ElMessage } from "element-plus";

import { getLogDetailApi } from "@/api/log.js";
import useCounter from "@/store/counter";
import { Loading } from "element-plus/es/components/loading/src/service";
const counterStore = useCounter(pinia);

import { ElMessageBox } from "element-plus";
// 分页
const currentPage = ref(1);
const pageSize = 8; // 每页的日志数量

// 计算总页数，根据总条数和分页大小
const totalPages = computed(() => {
  return Math.ceil(totalPageSize.value / pageSize);
});
// 获取列表部分
const tableData = ref([]);
const totalPageSize = ref(0);
const fetchData = async () => {
  try {
    const params = {};
    const res = await getLogDetailApi(params);
    console.log("获取日志info列表", res);
    tableData.value = res.data.list;
    totalPageSize.value = res.data.total_size;
  } catch (error) {
    console.log(error);
  }
};

onMounted(fetchData);
</script>
<style lang="scss" scoped>
.queryData {
  display: flex;
  flex: 1;
  width: 100%;
  flex-wrap: wrap;
}
.queryItem {
  width: 500px;
  height: 30px;
  line-height: 30px;
  margin: 5px 15px;
  display: flex;
}
.spanname {
  height: 30px;
  width: 70px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #bbbfc3;
}
.inp {
  width: 240px;
}
.operition {
  display: flex;
  margin-top: 10px; // 这个可以添加一些与上方容器的间距
  // margin-left: 1070px; // 将按钮推到右边
  margin-bottom: 20px;
}
.pagination {
  margin-left: 90%;
}
</style>
